﻿@model Device_Finder_MVC4.Models.CommandModel
@{
    ViewBag.Title = "CommandManager";
}
@section PreLoad{
    <script src="@Url.Content("~/IndependentComponent/DataTable/jquery.dataTables.js")"></script>
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/IndependentComponent/DataTable/table.css")" />
    @if (ViewBag.devices.Count > 0)
    {
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $('#tableTrack').dataTable({
                });

            
                var url = "CommandList/" + @ViewBag.devices[0].IDDEVICE ;
            $.ajax({
                type: "POST",
                url: url,
                data: {}
            }).done(function (msg) {
                $('#table').html(msg);
                $('#tableTrack').dataTable({
                    "aaSorting": [[0, "desc"]]
                });
            });

            

        });
        </script>
    }
    else
    {
        <script>
            alert("You have 0 device in account!!! We will redirect to Device Adding Page")
            window.location="AddDevice";
        </script>
    }
}

<div style="margin: auto">
    <script>
        function UpdateTable() {
            var url = "CommandList/" + $('#selectDevice').val();
            $.ajax({
                type: "POST",
                url: url,
                data: {}
            }).done(function (msg) {
                $('#table').html(msg);
                $('#tableTrack').dataTable({
                    "aaSorting": [[0, "desc"]]
                });
            });
        }
    </script>
    @{Html.RenderPartial("../Shared/UserCPLeftMenu");}
    <center>
        <h2>Command Manager</h2>
    </center>
    <p>
        Select device :
        <select id="selectDevice">
            @foreach (Device_Finder_MVC4.Models.DEVICE device in ViewBag.devices)
            {
                <option value="@device.IDDEVICE">@device.NAME </option>
            }
        </select>
    </p>

    <div>
        @{
            List<Object> temp = new List<object>{
                new {value = "Shell", text = "Shell"},
                new {value = "Client_Backup", text = "Backup"},
                new {value = "Client_WebCam", text = "WebCam Capture"}};

            SelectList OpcodeSL = new SelectList(temp, "value", "text");
        }
        
            
        <fieldset style="border-bottom-style:dotted; border-bottom-color:black; border-bottom-width:medium;">
            <ol>
                <li>
                    <center>
                        <p>
                        @Html.DropDownListFor(m => m.Opcode, OpcodeSL, new { @id = "OpcodeBox", @Style = "height:40px;"})
                        @Html.TextBoxFor(m => m.Param, new { @Value = "Put Shell command in here", @id = "ParamBox", @Style = "width:500px; height:30px;" })
                        <img id="submitbtn" src="../../Images/add-btn.png" style="height:30px;" />
                        </p>
                    </center>
                </li>
                <li><center style="color:red; font-size:x-large;"><div id="PushResult"></center></div></li>

            </ol>
                
            <script type="text/javascript">
                $("#submitbtn").click(function () {
                    var addUrl = "CommandAdd?IDDevice=" + $('#selectDevice').val() +"&Opcode=" + $('#OpcodeBox').val() + "&Param=" + $('#ParamBox').val() ;
                    $.ajax({
                        type: "GET",
                        url: addUrl,
                        data: {}
                    }).done(function (msg) {
                        if(msg=="True")
                        {
                            $('#PushResult').html("Add Done !!");
                            UpdateTable();
                        }else
                            $('#PushResult').html("Operation False!! #_#");
                    });
                });
            </script>

        </fieldset>
        
    </div>
    <script>
        
        $('#selectDevice').change(function(){
            UpdateTable();
        });

        $('#OpcodeBox').change(function () {
            opcodeVal = $('#OpcodeBox').val();
            if(opcodeVal == "Shell")
            {
                $("#ParamBox").val("Put Shell command in here");
            }
            else if (opcodeVal == "Client_Backup")
            {
                $("#ParamBox").val("Put file path in here");
            }
            else if (opcodeVal == "Client_WebCam")
            {
                $("#ParamBox").val("None");
            }
        });


    </script>
    <h3>Recent Command</h3>
    <div id="table" style="width: 100%; float: left;">
    </div>
    <div id="showMap">
    </div>
</div>
<div style="clear: both">
</div>
